<nz-layout class="layout">
  <nz-sider
    nzCollapsible
    [nzBreakpoint]="'lg'"
    [nzCollapsedWidth]="0"
    [nzZeroTrigger]="zeroTrigger"
  >
    <app-left-sider></app-left-sider>
  </nz-sider>
  <nz-layout>
    <nz-header></nz-header>
    <nz-content>
      <button nz-button [nzType]="'primary'" (click)="showModal()">
        <span>Show Modal</span>
      </button>
      <nz-modal
        [(nzVisible)]="isVisible"
        nzTitle="The first Modal"
        (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()"
      >
        <input nz-input placeholder="类别" [(ngModel)]="result.title" />
        <nz-input-number
          [(ngModel)]="result.price"
          [nzMin]="-1000000"
          [nzMax]="1000000"
          [nzStep]="0.1"
          [nzPlaceHolder]="'金额'"
        ></nz-input-number>
        <nz-date-picker [(ngModel)]="result.time"></nz-date-picker>
        <nz-tree-select
        style="width: 250px"
        [nzNodes]="nodes"
        nzShowSearch
        nzPlaceHolder="Please select"
        [(ngModel)]="result.category_id"
      >
      </nz-tree-select>
      </nz-modal>

      <div class="inner-content">
        <nz-table #basicTable [nzData]="datalist">
          <thead>
            <tr>
              <th>#.</th>
              <th>项目</th>
              <th>金额</th>
              <th>日期</th>
              <th>类别</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of basicTable.data">
              <td>{{ data.id }}</td>
              <td>{{ data.title }}</td>
              <td>{{ data.price }}</td>
              <td>{{ data.time }}</td>
              <td>{{ data.category_name }}</td>
              <td>
                <a (click)="editModal(data)">修改</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a>Delete</a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>

      <app-category></app-category>
    </nz-content>
    <nz-footer>Ant Design ©2019 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>
<ng-template #zeroTrigger>
  <i nz-icon nzType="menu-fold" nzTheme="outline"></i>
</ng-template>
